<?php include 'user_detail_lib.php'; ?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Thông Tin Anh/Chị Em</h3>
</div>
<form id="brother-profile" class="horizontal-form" action="user_detail_execute.php?action=<?= $s_Action ?>-brother&userid=<?= $f_userid ?>" method="post">
    <div class="modal-body">
        <div class="alert alert-error hide">
            <button class="close" data-dismiss="alert"></button>
            Kiểm tra lại thông tin bên dưới.
        </div>
        <div class="row-fluid text-center">
            <div class="span12">
                <div class="control-group">
                    <label for="brother_userid" class="control-label">Mã Số</label>
                    <div class="controls">
                        <input type="text" placeholder="Ví Dụ: 13001" class="m-wrap span4 text-center" name="brother_userid" id="brother_userid">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn">Thoát</button>
        <button class="btn blue" type="submit"><i class="icon-ok"></i> Thêm</button>
    </div>
</form>
<script type="text/javascript">
    var handleValidation_brother = function() {

        var frm_brother_profile = $('#brother-profile');
        var err_brother_profile = $('.alert-error', frm_brother_profile);

        frm_brother_profile.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "",
            rules: {
                brother_userid: {
                    required: true
                }
            },
            messages: {
                brother_userid: {
                    required: 'Bắt buộc nhập'
                }
            },
            invalidHandler: function (event, validator) { //display error alert on form submit              
                err_brother_profile.show();
                App.scrollTo(err_brother_profile, -200);
            },
            highlight: function (element) { // hightlight error inputs
                $(element)
                .closest('.help-inline').removeClass('ok'); // display OK icon
                $(element)
                .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
            },
            unhighlight: function (element) { // revert the change done by hightlight
                $(element)
                .closest('.control-group').removeClass('error'); // set error class to the control group
            },
            success: function (label) {
                label
                .closest('.control-group').removeClass('error').addClass('success').end()
                .remove(); // set success class to the control group
            },
            submitHandler: function (form) {
                err_brother_profile.hide();
                form.submit();
            }
        });
    }
    
    handleValidation_brother();
</script>